<div class="background">
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
                <span>
              用户名
              <i
                nz-icon
                nz-tooltip
                nzTitle="你想要被怎么称呼？"
                nzType="question-circle"
                nzTheme="outline"
              ></i>
          </span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入用户名！">
                <input nz-input id="nickname" formControlName="nickname" />
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入密码！">
                <input nz-input type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
                <input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
                <ng-template #errorTpl let-control>
                    <ng-container *ngIf="control.hasError('required')">
                        请输入确认密码！
                    </ng-container>
                    <ng-container *ngIf="control.hasError('confirm')">
                        两次密码输入不正确！
                    </ng-container>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入有效邮箱！">
                <input nz-input formControlName="email" id="email" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>电话号码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']" [nzErrorTip]="telErrorTpl">
                <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                    <ng-template #addOnBeforeTemplate>
                        <nz-select formControlName="phoneNumberPrefix" class="phone-select">
                            <nz-option nzLabel="+86" nzValue="+86"></nz-option>
                            <nz-option nzLabel="+87" nzValue="+87"></nz-option>
                        </nz-select>
                    </ng-template>
                    <input formControlName="phoneNumber" id="phoneNumber" nz-input />
                </nz-input-group>
                <ng-template #telErrorTpl let-control>
                    <ng-container *ngIf="control.hasError('required')">
                        请输入手机号码
                    </ng-container>
                    <ng-container *ngIf="control.hasError('error')">
                        手机号格式错误
                    </ng-container>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>验证码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入验证码！" nzExtra="我们需要校验你不是机器。">
                <div nz-row [nzGutter]="8">
                    <div nz-col [nzSpan]="12">
                        <input nz-input formControlName="captcha" id="captcha" />
                    </div>
                    <div nz-col [nzSpan]="12">
                        <button nz-button (click)="getCaptcha($event)">获得验证码</button>
                    </div>
                </div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row class="register-area">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <label nz-checkbox formControlName="agree">
              <span>我已经阅读了 <a href="https://www.baidu.com/">协议</a></span>
            </label>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row class="register-area">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary" (click)="clickRegister()">注册</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</div>
